import React, { useContext, useEffect, useMemo, useReducer, useState } from 'react'
import {
  Table, Button, Input, Drawer, Form, Row, Col, Select, DatePicker,
  Descriptions, Badge, Collapse, Steps, Card, Empty
} from 'antd'
import componentModule from '@/views/productManagement/components/insideRework/componentModule'
import { ProductStoreContext } from '@/views/productManagement/components/insideRework/index'
import { HighlightOutlined } from '@ant-design/icons'

const { Step } = Steps

export function ProductInfo() {
  const { state } = useContext(ProductStoreContext)
  const { product } = state
  const {
    OrderProductId, OrderProductCode, OrderbagId, ProductId,
    Name, CtmName, Status, NetOrderProductId, ShopName, PSize
  } = product
  return useMemo(() => {
    return <Descriptions title="产品信息">
      <Descriptions.Item label="产品名">{Name}</Descriptions.Item>
      <Descriptions.Item label="产品号">{OrderProductCode}</Descriptions.Item>
      <Descriptions.Item label="公司名">{CtmName}</Descriptions.Item>
      <Descriptions.Item label="商户名">{ShopName}</Descriptions.Item>
      <Descriptions.Item label="产品规格">
        {PSize}
      </Descriptions.Item>
    </Descriptions>
  }, [product])
}

const { Panel } = Collapse

//  产品和组件嵌套表格
function RenderProductTable() {
  const { state, dispatch } = useContext(ProductStoreContext)
  const { product: { partEntries = {} } } = state
  const compList = Object.values(partEntries)
  return useMemo(() => <div>
    {
      do {
        if (!compList.length) {
          <Empty style={{ marginTop: 120 }} description={'请扫描照片,组件,产品条码进行返工申请'}/>
        } else {
          <Collapse defaultActiveKey={[0]}>
            {compList.map(({ OrderTechRoutes, ProductSoloCode, OrderProductPartId }, idx) => {
              return <Panel header={`组件号:${ProductSoloCode}`} key={idx}>
                <Card title={'当前流程信息'} extra={
                  <Button
                    onClick={() => {
                      dispatch({ type: 'compDetailDrawerToggle' })
                      dispatch({ type: 'changeCurrentComp', OrderProductPartId })
                    }}
                    type="primary" icon={<HighlightOutlined/>}>
                    申请组件返工
                  </Button>}>
                  <Steps current={1}>
                    {OrderTechRoutes.map(({ TechName, TechId }) => {
                      return <Step key={TechId} title={TechName}/>
                    })}
                  </Steps>
                </Card>
              </Panel>
            })}
          </Collapse>
        }
      }
    }

  </div>, [partEntries, dispatch])
}

export default RenderProductTable
